
.article-container {
    padding: 15px;
    overflow-y: auto;
    height: 100%;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: min-content;
}

.cover {
    width: 500px;
    margin: auto;
    height: 300px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .3);
}

.book {
    width: 100%;
    height: 100%;
    display: flex;
    perspective: 1200px;

    &__page {
        position: relative;
        width: 50%;
        height: 100%;
        display: grid;
        transform: rotateY(0deg);
        transition: transform 0.9s cubic-bezier(0.645, 0.045, 0.355, 1);
        transform-origin: 0% 0%;
        background-color: #F5F5F5;
        background-image: linear-gradient(90deg, rgba(227,227,227,1) 0%, rgba(247,247,247,0) 18%);

        &:nth-of-type(1) {
            background-image: linear-gradient(-90deg, rgba(227,227,227,1) 0%, rgba(247,247,247,0) 18%);
        }

        &--1 {
            cursor: pointer;
            overflow: hidden;

            img {
                width: 100%;
                max-width: 100%;
                height: 100%;
            }
        }

        &--2 {
            position: absolute;
            right: 0;
            pointer-events: none;
            transform-style: preserve-3d;
            background-color: #F5F5F5;
            background-image: linear-gradient(90deg, rgba(227,227,227,1) 0%, rgba(247,247,247,0) 18%);
        }

        &--4 {
            cursor: pointer;
            padding: 0 calc(var(--baseline) * 3);
        }

        &-front {
            position: absolute;
            width: 100%;
            height: 100%;
            transform: rotateY(0deg) translateZ(1px);
        }

        &-back {
            position: absolute;
            width: 100%;
            height: 100%;
            padding: 0 calc(var(--baseline) * 1.8);
            transform: rotateY(180deg) translateZ(1px);
        }

        .page__content {
            padding: var(--baseline);
            height: 100%;
            position: relative;
            text-align: center;

            &-book-title {
                font-family: var(--book-title);
                font-size: calc(var(--base-size) * 1.5);
                font-weight: bold;
                text-transform: uppercase;
                letter-spacing: 3px;
                color: #2A2935;
                margin-top: calc(var(--baseline) * 5);
                margin-bottom: calc(var(--baseline) * 2);
            }

            &-author {
                font-family: var(--title);
                font-size: calc(var(--base-size));
                font-weight: 100;
                text-transform: uppercase;
                color: #2A2935;
                border-top: 1px solid #2A2935;
                border-bottom: 1px solid #2A2935;
                display: inline-block;
                padding: calc(var(--baseline) / 2) calc(var(--baseline) / 5);
                margin-bottom: calc(var(--baseline) * 6);
            }

            &-credits {
                font-family: var(--title);
                text-transform: uppercase;
                font-size: calc(var(--base-size) * 0.8);
                margin-bottom: calc(var(--baseline) * 2);
                letter-spacing: 1px;

                span {
                    display: block;
                    font-size: calc(var(--base-size) * 1.2);
                    letter-spacing: 0;
                }
            }

            &-copyright {
                position: absolute;
                width: calc(100% - (var(--baseline) * 2));
                bottom: calc(var(--baseline) * 2);
                font-family: var(--title);
                font-size: calc(var(--base-size) * 0.8);
                text-transform: uppercase;
            }

            &-title {
                font-family: var(--title);
                font-size: calc(var(--base-size) * 1);
                text-transform: uppercase;
                letter-spacing: 1px;
                margin-top: calc(var(--baseline) * 1);
                margin-bottom: calc(var(--baseline) * 1);
            }

            &-table {
                width: 100%;
                margin-top: calc(var(--baseline) * 0.5);

                td {
                    font-family: var(--title);
                    font-size: calc(var(--base-size) * 0.5);
                    padding-bottom: calc(var(--baseline) * 0.5);
                    text-transform: uppercase;
                }
            }

            &-blockquote {
                margin-bottom: calc(var(--baseline) * 1);
            }

            &-blockquote-text {
                font-family: var(--title);
                font-size: calc(var(--base-size) * 0.5);
                font-style: italic;
                text-align: justify;
            }

            &-blockquote-reference {
                font-family: var(--title);
                font-size: calc(var(--base-size) * 0.7);
                margin-top: calc(var(--baseline) * 0.3);
                float: right;
                text-transform: uppercase;
            }

            &-text {
                font-family: var(--title);
                font-size: calc(var(--base-size) * 0.67);
                text-align: justify;
                text-indent: var(--baseline);
            }
        }
        .page__number {
            position: absolute;
            bottom: var(--baseline);
            width: calc(100% - (var(--baseline) * 2));
            font-family: var(--title);
            font-size: calc(var(--base-size) * 0.67);
            text-align: center;
        }
    }

    input[type="radio"] {
        display: none;

        &:checked+.book__page {
            transition: transform 0.9s cubic-bezier(0.645, 0.045, 0.355, 1);
            transform: rotateY(-180deg);
        }
    }
}
